<template>
  <div class="w-full h-full flex items-center">
    <div class="a relative">
      <div class="b absolute top-20 h-44 ml-28">
        <img
          src="https://pic1.imgdb.cn/item/64732062f024cca173948fed.png"
          alt=""
          class="b-img"
        />
        <div class="b1">
          <div class="b1-text">来探索美食</div>
          <br />
          <div class="b1-text2">品尝甜蜜，探索新意</div>
        </div>
      </div>
      <div class="rigth bg-white">
        <div class="rigth-a">
          <span class="text-4xl">用户注册</span>
        </div>
        <div class="rigth-inp">
          <div class="rigth-inp-img">
            <img
              src="https://pic1.imgdb.cn/item/64734577f024cca173c12c1b.png"
              alt=""
            />
          </div>
          <input type="text" v-model="username.phone" placeholder="+86" />
        </div>
        <div class="rigth-inp">
          <div class="rigth-inp-img">
            <img
              src="https://pic1.imgdb.cn/item/64734575f024cca173c12a67.png"
              alt=""
            />
          </div>
          <input
            type="text"
            v-model="username.code"
            placeholder="请输入手机验证码"
          />
          <div class="yzm" @click="aonie">获取验证码</div>
        </div>
        <div class="rigth-inp">
          <div class="rigth-inp-img">
            <img
              src="https://pic1.imgdb.cn/item/6473205af024cca17394876a.png"
              alt=""
            />
          </div>
          <input
            type="text"
            v-model="username.pwd"
            placeholder="0-11位密码区分大小写"
          />
        </div>
        <div class="rigth-inp">
          <div class="rigth-inp-img">
            <img
              src="https://pic1.imgdb.cn/item/64732069f024cca1739496db.png"
              alt=""
            />
          </div>
          <input
            type="text"
            v-model="username.name"
            placeholder="请输入你想要注册的名字"
          />
        </div>
        <div class="rigth-p">
          <input type="checkbox" id="radio1" />&nbsp;&nbsp;&nbsp;
          <span>已阅读并同意以下协议探索美食</span>
          <p class="text-red-400">
            服务协议
            <span>、</span
            >隐私权政策<span>、</span>法律声明<span>、</span>及客户端服务协议
          </p>
        </div>
        <button @click="aoic">注册</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { reactive } from "vue";
export default {
  setup() {
    let iy = "12412412412";
    var username = reactive({
      name: "",
      phone: "",
      pwd: "",
      code: "",
    });
    let aonie = function () {
      var myHeaders = new Headers();
      myHeaders.append("User-Agent", "Apifox/1.0.0 (https://www.apifox.cn)");
      var formdata = new FormData();
      formdata.append("phoneNumber", this.username.phone);
      var requestOptions = {
        method: "POST",
        headers: myHeaders,
        body: formdata,
        redirect: "follow",
      };

      fetch("http://1.14.126.98:8081/user/message", requestOptions)
        .then((response) => response.text())
        .then((result) => console.log(result))
        .catch((error) => console.log("error", error));
    };
    let aoic = function () {
      if (document.getElementById("radio1").checked == false) {
        alert("您还没同意我们的服务条款哟");
      } else {
        var myHeaders = new Headers();
        myHeaders.append("User-Agent", "Apifox/1.0.0 (https://www.apifox.cn)");

        var formdata = new FormData();
        formdata.append("phone", this.username.phone);
        formdata.append("name", this.username.name);
        formdata.append("pwd", this.username.pwd);
        formdata.append("code", this.username.code);

        var requestOptions = {
          method: "POST",
          headers: myHeaders,
          body: formdata,
          redirect: "follow",
        };
        fetch("http://1.14.126.98:8081/user/register", requestOptions)
          .then((response) => response.text())
          .then((result) => alert(result))
          .catch((error) => console.log("error", error));

        console.log(result);
      }
    };
    return {
      aoic,
      username,
      iy,
      aonie,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/components/zhouq/regiSter/index.scss";
</style>
